<template>
  <div class="electron-layer">
    <span>Electron</span>
    <div class="electron-api">
      <el-button type="primary" @click="browserWindow">createSmartWindow</el-button>
      <el-button type="primary" @click="showOpenDialog">showOpenDialog</el-button>
      <el-button type="primary" @click="notification">Notification API</el-button>
      <!-- <el-button type="primary" @click="browserWindow">createSmartWindow</el-button> -->
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { initPlatform } from '@/plugins'

export default defineComponent({
  name: 'Electron',
  mounted () {
    console.log('=== Electron ===')
  },
  methods: {
    browserWindow () {
      initPlatform((electron: ElectronAPI) => {
        electron.createSmartWindow({
          callback () {
            console.log('-------closed--------')
          },
          route: '/webgl',
          execute: {
            file: './execute.js',
            code: 'alert(2023)'
          }
        })
      })
      // this.$router.push('/webgl')
    },
    showOpenDialog () {
      initPlatform((electron: ElectronAPI) => {
        electron.remote.dialog.showOpenDialog({
          title: 'Electron API',
          properties: ['openFile', 'openDirectory']
        }).then((result: any) => {
          console.log(result.canceled)
          console.log(result.filePaths)
        }).catch((err: any) => {
          console.log(err)
        })
      })
    },
    notification () {
      if (this.isBrowser) {
        if (Notification.permission === 'default') {
          Notification.requestPermission()
        } else {
          const option = {
            title: '温馨提示',
            body: '不要天天坐在电脑前，要注意休息！'
          }
          const notify = new window.Notification(option.title, option)
          notify.addEventListener('click', () => console.log('点击了'))
        }
      }
      initPlatform((electron: ElectronAPI) => {
        electron.triggerNotification()
      })
    }
  }
})
</script>

<style scoped lang="scss">
.electron-layer {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.electron-api {
  margin-top: 20px;
  display: flex;
}
</style>
